<template>
  <!--  html代码编写位置 -->
    <div id="box1">
        <h2>学生信息</h2>
        <p>
        <p>学生姓名:{{ stuName }}</p>
        <p>学生年龄:{{ age }}</p>
        <p>学生性别:{{ sex }}</p>
    </div>
</template>


<script type="text/javascript">
   //  编写javascript代码  es6  模块化开发思路
export default {
    name: "StudentView",
    data: function () {
        return {
            stuName: 'jack',
            age: 20,
            sex: '男'
        }
    }
}

</script>

<style  scoped>
/*  css样式*/
#box1 {
    width: 500px;
    height: 500px;
    border: 2px solid yellowgreen;
    margin-bottom: 10px;
    text-align: center;
}

#box1 {
    font-size: 40px;
    background-color: darkgrey;
}


</style>